<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>图书列表</title>
	<link rel="stylesheet" href="css/layui.css" />
</head>
<body>
	<h1 style="text-align: center;color: #1e9fff;margin-bottom: 20px;">图书列表</h1>
	
	
	
	<form class="layui-form layui-row layui-col-space5" >
	  <div class="layui-col-md2">
	    <div class="layui-input-wrap">
	      <input type="text" name="bookName" value="" placeholder="图书名称" class="layui-input" lay-affix="clear">
	    </div>
	  </div>
	  <div class="layui-col-md2">
	    <div class="layui-input-wrap">
			<div id="cId" class="xm-select-demo"></div>
	    </div>
	  </div>
	  <div class="layui-col-md2">
	    <div class="layui-input-wrap">
			<select name="status">
			   <option value="">是否上架</option>
			   <option value="0">下架</option>
			   <option value="1">上架</option>
			 </select>
	    </div>
	  </div>  
	  
	  <div class="layui-col-md3">
	    <div class="layui-input-wrap">
	  		<input type="text" class="layui-input" name="time" id="ID-laydate-range-datetime" placeholder="请选择时间范围">	
	    </div>
	  </div>  
	  
	  
	  <div class="layui-col-md2">
	    <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
	    <button type="reset" id="reset" class="layui-btn layui-btn-primary">清空</button>
	  </div>
	</form>
	
	
	
	
	<!-- 根据后端数据生成前端表格 -->
	<table class="layui-hide" id="test" lay-filter="test"></table>
	
	
	
	<script src="//unpkg.com/layui@2.11.5/dist/layui.js"></script>
	<script src="js/xm-select.js"></script>
	<script>
		layui.use(function(){
			
			//获取table组件的对象
			let table = layui.table;
			let $ = layui.$;
			let layer =layui.layer;
			let laydate= layui.laydate;
			let form = layui.form;
			
			
			form.on('submit(search)', function(data){
			    let field = data.field; // 获得表单字段		
				let time = field.time;
				
				if(time && time.length>0){
					let times = time.split("-")
					if(times && times.length==2){
						field.start=times[0].trim();
						field.end=times[1].trim();
					}
				}
				console.log(field);
				
			    // 执行搜索重载
			    table.reload('test', {
			      page: {
			        curr: 1 // 重新从第 1 页开始
			      },
			      where: field // 搜索的字段
			    });
			    
			    return false; // 阻止默认 form 跳转
			  });
			
			
			
			//获取分类列表
			$.getJSON("http://localhost:8080/getCategoryList",function(d){
				if(d.code==0){
					//sm-select下拉框
					var demo1 = xmSelect.render({
						el: '#cId',
						prop:{
							name:'categoryName',
							value:'categoryId'
						},
						name:'categoryId',
						filterable:true,
						theme:{
							color:'#0081ff'
						},
						radio:true,
						data: d.data
					})
					//绑定清空事件
					$("#reset").click(function(){
						demo1.setValue([])
					})
					
				}else{
					layer.msg(d.msg)
				} 
			});
			
			
			
			
			
			
			//时间范围
			laydate.render({
				elem: '#ID-laydate-range-datetime',
				type: 'datetime',
				format:'yyyy/MM/dd HH:mm:ss',
				range: true
			});
			
			
			//头部工具栏事件
			table.on('toolbar(test)',function(obj){
				let event = obj.event;
				if(event=='addBook'){
					//添加事件
					layer.open({
						title:"添加图书",
						type:2,
						content:"book_add.html",
						area:['500px','600px'],
						closeBtn:1,
						end:function(){
							//刷新表格
							table.reload("test")
						}
					});
					
					
				}else if(event=='batchDel'){
					//批量删除	
					let id = obj.config.id;
					let checkStatus = table.checkStatus(id);
					//选中图书的列表
					let list = checkStatus.data;
					if(list && list.length==0){
						layer.msg("没有选择要删除的数据")
					}else{
						layer.confirm('确定删除吗?',{btn:['确定','取消']},function(index){
							
							//构建参数
							let arr=[];
							for(let i=0;i<list.length;i++){
								arr.push(list[i].bookId);
							}
							$.ajax({
								type:"post",
								url:"http://localhost:8080/batchDeleteBook",
								data:JSON.stringify(arr),
								contentType:'application/json',
								dataType:"json",
								success:function(d){
									if(d.code==0){
										table.reload("test");
									}else{
										layer.msg(d.msg);
									}
								}
									
							});
							
							
							//关闭弹出层
							layer.close(index);
						});
					}
					
					
					
				}
			});
			
			
			//单元格事件处理
			table.on('tool(test)',function(obj){
				// console.log(obj);
				let event=obj.event;
				if(event=='del'){		
					layer.confirm('确定删除吗?',{btn:['确定','取消']},function(index){
						//点击确定
						let bookId = obj.data.bookId;
						//Ajax调用
						$.getJSON("http://localhost:8080/deleteBook",{bookId:bookId},function(d){
							if(d.code===0){
								//删除成功，表格数据刷新
								table.reload("test");
							}else{
								layer.msg(d.msg);
							}
						});
						//关闭提示框
						layer.close(index);
					});
				}else if(event=='edit'){
					
					layer.open({
						title:"更新图书",
						type:2,
						content:"book_edit.html?status="+obj.data.status+"&categoryId="+obj.data.categoryId,
						area:['500px','600px'],
						closeBtn:1,
						end:function(){
							//刷新表格
							table.reload("test")
						},
						success: function(layero,index,that){
							//获取弹出层的JQuery对象
							let body = layer.getChildFrame('body',index);
							//给iframe页中的某个输入框赋值
							body.find('#bookId').val(obj.data.bookId);
							body.find('#bookName').val(obj.data.bookName);
							body.find('#authorName').val(obj.data.authorName);
							body.find('#price').val(obj.data.price);
							body.find('#picId')[0].src="http://localhost:8080"+obj.data.bookUrl;
							body.find('#createTime').val(obj.data.createTime);
							body.find('#bookAddress').val(obj.data.bookAddress);
							body.find('#bookUrl').val(obj.data.bookUrl);
							
						}
					});
					
					
					
				}
			});
			
			
			
			
			//调用对象中的函数进行表格生成
			table.render({
				elem:"#test",
				url:"http://localhost:8080/getBooksPage",
				page:{
					limit:10,
					limits:[10,20,30,40],
					prev:"上一页",
					next:"下一页",
					groups:10,
					theme:"#1e9fff"
				},
				skin:"line",
				request:{
					pageName:'pageNo',
					limitName:'pageSize'
				},
				parseData:function(res){
					return {
					      "code": res.code, // 解析接口状态
					      "msg": res.msg, // 解析提示文本
					      "count": res.data.total, // 解析数据长度
					      "data": res.data.page // 解析数据列表
					    };
				},
				toolbar:`
					<div>
						<button type="button" lay-event="batchDel" class="layui-btn layui-btn-sm layui-bg-red">批量删除</button>
						<button type="button" lay-event="addBook" class="layui-btn layui-btn-sm layui-bg-blue">添加</button>
					</div>
				`
				,
				cols:[[
					{
						type:'checkbox',fixed:'left'
					},
					{
						title:"图书编号",
						field:"bookId"
					},
					{
						title:"图书名称",
						field:"bookName"
					},
					{
						title:"图书封面",
						templet:function(d){
							return "<img src='http://localhost:8080"+d.bookUrl+"'>";
						}
					},
					
					{
						title:"图书作者",
						field:"authorName"
					},
					{
						title:"图书分类",
						templet:function(d){
							return d.category.categoryName;
						}
					},
					{
						title:"图书价格",
						field:"price"
					},
					{
						title:"是否上架",
						templet:function(d){
							console.log("当前行数据：",d.status);
							return d.status==0?'<span class="layui-badge layui-bg-green">下架</span>':'<span class="layui-badge">上架</span>'
						}
					},
					{
						title:"创建时间",
						field:"createTime"
					},
					{
						title:"操作",
						templet:function(d){
							let s=' <button type="button" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-normal">更新</button>'
							s+='<button type="button" lay-event="del"   class="layui-btn layui-btn-xs layui-bg-red">删除</button>';
							return s;
						}
					}
				]]
			})
		})
		
	</script>
	
</body>
</html>